<template>
	<view class="main">

		<u-navbar title="医生团队" placeholder="true" @rightClick="rightClick" :autoBack="true"  :leftIconSize="0"></u-navbar>

		<view style="margin-top: 20rpx;">
			<u-tabs @change="onTabChange" :list="TerritoryListData.map(tab => ({ name: tab.name }))" v-model="activeTab" lineColor="#FAFAFA" :activeStyle="{
		        color: '#ffffff',
				width:'150rpx',
				height:'60rpx',
				background:'#1FA194',
				borderRadius:'40rpx',
		        fontWeight: 'bold',
		        display: 'flex',
		        alignItems: 'center',
		        justifyContent: 'center',
		       
		    }" :inactiveStyle="{
		       color: '#303133',
		       width:'150rpx',
		       height:'60rpx',
		       background:'#F3F3F3',
			   display: 'flex',
			   alignItems: 'center',
			   justifyContent: 'center',
		       borderRadius:'40rpx',
		    }">
			</u-tabs>
		</view>
		<z-paging ref="paging" v-model="DoctorListData" @query="queryList" usePageScroll>
			<view class=" column center top">
				<view v-for="(doctor, index) in DoctorListData" :key="index" class="doctor-card">

					<view class="doctor-info" @click="toUrlr(doctor.id)">

						<view class="row">

							<image class="avatarimg" :src="doctor.avatar"></image>
							<view class="column">
								<view class="doctor-details row_a_c">
									<view class="doctor-title">{{ doctor.name }}</view>
									<view class="doctor-role center">{{ doctor.position.name }}</view>
								</view>
								<view class="info">
									{{doctor.territory.name}}
								</view>
							</view>

						</view>

						<view class="doctor-description">
							<span style="color: #57B9AF;">擅长:</span>
							{{ doctor.specialty }}
						</view>
					</view>
				</view>

			</view>
		</z-paging>

	</view>
</template>

<script>
	import api_doctor from '@/api/doctor.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'

	export default {
		mixins: [ZPMixin],
		async onShow() {
			this.getTerritoryListFuc(); //获取科室列表
			// this.getDoctorListFuc(); //获取医生列表
		},

		data() {
			return {
				territory: 666, //选中科室id-666为全部
				TerritoryListData: [], //科室列表
				DoctorListData: [], //医生列表
				activeTab: 0,

			};
		},
		methods: {

			//获取医生列表
			// async getDoctorListFuc() {
			// 	var per = {
			// 		no_page: 1,
			// 		page_size: 10,
			// 	}
			// 	if (this.territory != 666) {
			// 		per.territory = this.territory
			// 	}
			// 	const res = await api_doctor.getDoctorList(per);
			// 	if (res.code == 1) {
			// 		this.DoctorListData = res.data.list
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },



			async queryList(pageNo, pageSize) {

				const per = {
					no_page: pageNo,
					page_size: pageSize,
				}

				if (this.territory != 666) {
					per.territory = this.territory
				}
				const res = await api_doctor.getDoctorList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},





			onTabChange(item) {
				const selectedTab = this.TerritoryListData[item.index];
				this.territory = selectedTab.id;
				this.$refs.paging.reload();
				// console.log("当前选中的 tab id:", this.territory);
			},

			//获取科室列表
			async getTerritoryListFuc() {
				const res = await api_doctor.getTerritoryList();
				if (res.code == 1) {
					this.TerritoryListData = res.data.list
					this.TerritoryListData.unshift({ id: 666, name: '全部' });
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			toUrlr(id) {
				uni.navigateTo({
					url: '/pages/zxjy/ysxq?id=' + id
				});
			},

		}
	};
</script>

<style scoped>
	.main {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}

	.top {
		padding: 32rpx;
	}

	.doctor-card {
		width: 686rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20px;
		padding: 32rpx;
	}



	.doctor-details {
		margin-top: 15rpx;
	}

	.doctor-title {
		font-weight: bold;
		font-size: 20px;
	}

	.doctor-role {
		min-width: 72rpx;
		min-height: 40rpx;
		background: #E9F9F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #1FA194;
		margin-left: 20rpx;
		padding: 10rpx;

	}

	.doctor-description {
		margin-top: 10px;
		color: #606060;
	}

	.avatarimg {
		width: 136rpx;
		height: 136rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-right: 50rpx;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 18rpx !important;
	}

	.info {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 20rpx;
	}
</style>